<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      body {
        padding: 50px;
      }

      button {
        padding: 5px 10px;
      }

      div {
        margin-top: 10px;
        width: 200px;
        height: 200px;
        border: 1px solid red;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <button id="doBtn">do something</button>
    <div id="div"></div>
    <script>
      console.log(1);
      var doBtn = document.getElementById('doBtn');
      var div = document.getElementById('div');
      function sleep(ms) {
        //延时作用
        var start = new Date();
        while (new Date() - start <= ms) {}
      }

      // 异步任务
      doBtn.onclick = function () {
        console.log(3);
        div.innerHTML = 'doing...please wait...';
        //思考：为什么不显示？
        // GUI 渲染线程与 JS 引擎线程互斥 他在解析所以不会去渲染 儿解析之后后面就直接变成了done
        // 同步任务
        sleep(3000); //延时3s //阻塞渲染线程
        div.innerHTML = 'done';
      };

      // 异步任务
      doBtn.onclick = function () {
        console.log(3);
        div.innerHTML = 'doing...please wait...';
        // 异步任务，就不会卡死掉 先输出doing...please wait...在输出done
        // 异步不会卡死主线程
        setTimeout(function(){
          div.innerHTML = 'done';
        },3000)
      };

      console.log(2);

    </script>
  </body>
</html>
